<template>
	<view class="content">
		<u-navbar leftIconColor="#fff" titleStyle="color:#fff" title="邀请好友" bgColor="transparent" :autoBack="true"
			:placeholder="true">
		</u-navbar>
		<view class="title">
			邀请好友加入我们
		</view>
		<!-- <view class="title-text">
			跟我一起来打工赚钱吧
		</view> -->
		<view class="login-content">
			<view class="income">
				<view class="income-item">
					<view class="income-num">
						{{info.tg_Reward || '0'}}
					</view>
					<view class="income-text">
						已获得推广收入
					</view>
				</view>
				<view class="income-item">
					<view class="income-num">
						{{info.allReward || '0'}}
					</view>
					<view class="income-text">
						已获得矿机总收益
					</view>
				</view>
			</view>
			<view class="invite">
				<!-- <view class="invite-text">
					<text>我的邀请码</text>
					<image src="/static/home/copy.png" @click="gocopy(info.guid)" mode=""></image>
				</view> -->
				
				<view class="code">
					<image :src="QRimage" mode=""></image>
				</view>
				<view class="code-text">
					{{info.guid}}
				</view>
			</view>
		</view>
		<view class="btn" @click="gocopy(info.img_url)">
			<u-button class="red-text-btn" shape="circle" type="primary" text="复制邀请码"
				color="linear-gradient( 90deg, #C8F673 0%, #98F083 100%)" size="large" iconColor="#000"></u-button>
		</view>
	</view>
</template>

<script>
	import QR from "@/common/wxqrcode.js" // 二维码生成器  
	export default {
		data() {
			return {
				info: {},
				QRimage: ''
			}
		},
		onLoad() {
			this.geiuserinfo()
		},
		methods: {
			getqr() {
				let qrimg = this.info.img_url
				this.QRimage = QR.createQrCodeImg(qrimg, {
					size: parseInt(200),
					typeNumber: 7
				})
			},
			gocopy(text) {
				uni.setClipboardData({
					data: text,
					showToast: false,
					success: function(res) {
						console.log(res)
						uni.showToast({
							title: '复制成功！',
							icon: 'none'
						})
					},
				})
			},
			geiuserinfo() {
				let params = {

				}
				this.$Request({
					method: 'POST',
					url: '/api/share/shareImg',
					data: params
				}).then(res => {
					console.log(res)
					this.info = res.data
					this.getqr()
				})
			},
		}
	}
</script>

<style>
	page {
		background-color: #17191A;
	}
	.red-text-btn {
	  color: #17191A !important; /* 使用 !important 来确保覆盖默认样式 */
	  font-weight: bold;
	}
</style>
<style lang="scss" scoped>
	.content {
		height: 100vh;
		background-image: url('../../../static/my/my-bg.png');
		background-repeat: no-repeat;
		background-size: 100% 558rpx;
		padding: 30rpx;

		.title {
			color: #A1FFA9;
			font-size: 48rpx;
			font-weight: bold;
			margin-top: 58rpx;
			text-align: center;
		}

		.title-text {
			margin-top: 12rpx;
			color: #FFFFFF;
			font-size: 24rpx;
			text-align: center;
		}

		.login-content {
			padding: 30rpx;
			color: #fff;
			border-top-right-radius: 40rpx;
			border-top-left-radius: 40rpx;
			background: linear-gradient( 134deg, rgba(255,227,211,0.06) 0%, rgba(67,130,84,0.26) 100%);
			border: 4rpx solid rgba(108,233,137,0.12);
			border-radius: 30rpx;
			margin-top: 150rpx;

			.income {
				padding: 30rpx;
				border-radius: 30rpx;
				display: flex;
				justify-content: space-around;
				text-align: center;
				background-color: #17191A;

				.income-item {
					.income-num {
						font-size: 32rpx;
						font-weight: 600;
						color: #A1FFA9;
					}

					.income-text {
						color: #999;
						font-size: 24rpx;
						margin-top: 20rpx;
					}
				}
			}

			.invite {
				padding: 30rpx 30rpx 0;
				border-radius: 30rpx;
				margin-top: 30rpx;

				.invite-text {
					font-size: 28rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					image {
						width: 27rpx;
						height: 27rpx;
						margin-left: 10rpx;
					}
				}

				.code-text {
					padding: 20rpx;
					text-align: center;
					font-size: 60rpx; 
					font-weight: 600;
					margin-top: 20rpx;
				}

				.code {
					width: 380rpx;
					height: 380rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin: 0 auto;
					margin-top: 20rpx;
					background-image: url('../../../static/home/code-bg.png');
					background-repeat: no-repeat;
					background-size: 100% 100%;

					image {
						width: 307rpx;
						height: 307rpx;
					}
				}
			}
		}
		.btn {
			width: 434rpx;
			margin: 0 auto;
			margin-top: 30rpx;
		}
	}
</style>